<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩瞬间</title>
    <link rel="stylesheet" href="/css/computer/index.css">
    <link rel="stylesheet" href="/css/computer/lifemoment/lifemomentcreate.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">
    <style>
        

    </style>
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

<div class="container-box">
    <div class="sidebar-box-left">
        <div class="sidebar">
            <div class="sidebar-header">
                <a href="#" class="user" id="user-center">个人中心</a>
				<a href="#" class="user" id="user-login">登录/注册</a>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <a class="homepage">
                        <li>主页</li>
                    </a><a href="" class="lifemoment">
                        <li class="active">生活瞬间</li>
                    </a><a href="" class="tourlog">
                        <li>旅行记录</li>
                    </a><a href="" class="atlas">
                        <li>精彩图集</li>
                    </a>
                </ul>
            </nav>
        </div>
    </div>
    <div class="sidebar-box-right">
        <header>
            <div class="header-content">
                <h1 class="header-h1">记录生活中的美好时刻</h1>
                <p class="subtitle">珍藏每一份感动，分享每一段旅程</p>
                <a href="#" class="btn" id="addlife">创建瞬间</a>
            </div>
        </header>

        <div class="container">
            <div class="container-create">
                
                <!-- 图片上传区域 -->
                <div class="section">
                    <div class="section-title">
                        <i class="fas fa-image"></i>
                        <span>上传图片</span>
                    </div>
                    <div class="image-upload" id="upload-area">
                        <img id="preview-img" class="preview-image" alt="预览图">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>点击或拖拽图片到此处上传</p>
                        <button class="upload-btn">选择图片</button>
                        <input type="file" id="file-input" accept="image/*">
                    </div>
                </div>
                
                <!-- 标题输入区域 -->
                <div class="section">
                    <div class="section-title">
                        <i class="fas fa-heading"></i>
                        <span>输入标题</span>
                    </div>
                    <input type="text" class="title-input" placeholder="请输入标题..." id="content-title">
                </div>
                
                <!-- 内容编辑区域 -->
                <div class="section">
                    <div class="section-title">
                        <i class="fas fa-align-left"></i>
                        <span>编辑内容</span>
                    </div>
                    <textarea class="content-textarea" placeholder="请输入详细内容..." id="content-body"></textarea>
                </div>
            </div>
        </div>

        <footer>
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系方式</a>
                <a href="#">隐私政策</a>
                <a href="#">使用条款</a>
            </div>
            <p class="copyright">© 2023 美好时光记录 版权所有</p>
        </footer>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script src="/script/token.js"></script>
<script type="module">

    //环境变量初始化
    //获取导航的a标签，并设置href
    const homepageElement = document.querySelector('.homepage'); // 返回第一个匹配的节点
    const lifemomentElement = document.querySelector('.lifemoment'); // 返回第一个匹配的节点
    const atlasElement = document.querySelector('.atlas'); // 返回第一个匹配的节点
    const userCenter = document.querySelector('#user-center');//获取个人中心DOM
	const userLogin = document.querySelector('#user-login');//获取登录注册DOM


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	homepageElement.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	lifemomentElement.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	atlasElement.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
	userCenter.href = user_ip;
	userLogin.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

	//获取jwt令牌状态
	let jwtState = getJwtState(token);


	if(jwtState.success){
		userCenter.style.display = "block";
		userLogin.style.display = "none";
	}else{
		userCenter.style.display = "none";
		userLogin.style.display = "block";
	}

    // 图片上传功能
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('file-input');
    const previewImg = document.getElementById('preview-img');
    
    // 点击上传区域触发文件选择
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });
    
    // 文件选择变化时显示预览
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                previewImg.src = event.target.result;
                previewImg.style.display = 'block';
                uploadArea.querySelector('i').style.display = 'none';
                uploadArea.querySelector('p').style.display = 'none';
                uploadArea.querySelector('.upload-btn').style.display = 'none';
            };
            reader.readAsDataURL(file);
        }
    });
    
    // 拖放功能
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        // 修正后的写法
        const rootStyles = getComputedStyle(document.documentElement);
        uploadArea.style.borderColor = rootStyles.getPropertyValue('--primary-color');
        uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.1)';
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.style.borderColor = '#ccc';
        uploadArea.style.backgroundColor = '#f8f9fa';
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.style.borderColor = '#ccc';
        uploadArea.style.backgroundColor = '#f8f9fa';
        
        const file = e.dataTransfer.files[0];
        if (file && file.type.match('image.*')) {
            fileInput.files = e.dataTransfer.files;
            const changeEvent = new Event('change');
            fileInput.dispatchEvent(changeEvent);
        }
    });

    //提交创建方法
    function submitCreate(){
        let fileInput = document.getElementById("file-input").files[0];
        let contentTitle = document.getElementById("content-title");
        let contentBody = document.getElementById("content-body");

        
        //构建form表单，浏览器的方法
        const formData = new FormData();
        formData.append("image", fileInput); //封面
        formData.append("Lifename", contentTitle.value); //计划名称
        formData.append("Lifemessage", contentBody.value); //计划简介
        
        //读取上传的图片信息和用户信息
        axios
            .post(
                life_ip+"/createlife",
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        "Authorization": `Bearer ${token}`
                    },
                }
            )
            .then((res) => {
                //判断后端的报错信息。如果存在则保存失败
                console.log(res.data);
                if(res.data.message.success){
                    alert("创建成功");
                    window.location.href = life_ip;
                }
            })
            .catch(err => {
                console.log(err);
            });

    }
    document.getElementById("addlife").addEventListener("click",submitCreate);
    
    
</script>
</body>
</html>